<template>
<view class="page">
	<swiper class="swiper" :indicator-dots="true" :autoplay="true" >
		<swiper-item v-for="(item,index) in data.image.split(',')" :key='index'>
			<image class="swiper_item" :src="item" mode=""></image>
		</swiper-item>
	</swiper>
	<view class="status" :class="{isOld:data.timestatus.id==4}">{{data.timestatus.name}}</view>
	<!-- <view class="zb" @click="toZb">
		<view class="dian red"></view>
		<image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/zhibo.png" mode="widthFix"></image>
		直播图片
	</view> -->
	<view class="title_h">{{data.title}}</view>
	<view class="heng"></view>
	<view class="main">
		<view class="m_item red">{{data.type_id==1?'网洽会':data.type_id==2?'招商会':data.type_id==3?'专题会':''}}</view>
		<view class="chain_n">
			<view class="" v-for="(item,index) in data.chain_names.split(',')" :key='index'>{{item}}</view>
		</view>
		<view class="m_item"><image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/time.png" mode=""></image> {{data.starttime+' ~ '+data.endtime}}</view>
		<view class="m_item" @click="toMap"><image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/add.png" mode=""></image> {{data.address + data.room}}</view>
		<view class="m_item"><image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/yuanqu.png" mode=""></image> {{data.city_names}}</view>
		<view class="m_item">联系人：{{data.contact||'-'}}</view>
		<view class="m_item">联系电话：{{data.mobile||'-'}}</view>
	</view>
	<view class="heng"></view>
	<view class="bm">
		<view class="title_shu" v-if="numList.length>0">报名用户</view>
		<view class="bm_flex" v-if="numList.length>0">
			<view class="img" :class="{qd:item.status==3}" v-for="(item,index) in numList.slice(0,5)" :key='index' @click="toP(index)">
				<image :src="item.avatar||'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/pyq.png'" mode=""></image>
			</view>
			<view class="img img_b" v-if="numList.length>5">
				<image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/more.png" mode=""  @click="showL"></image>
			</view>
		</view>
		<view class="flex_t" v-if="data.video">
			<view @click="active=index" class="item_t" v-for="(item,index) in typeList" :key='index' :class="active==index?'active':''">{{item}}</view>
		</view>
		<view class="title_shu" v-if="!data.video">会议议程</view>
		<video v-if="active==1&&data.video" :autoplay="true" class="video" :src='data.video'></video>
		<rich-text :nodes="data.content" v-if="active==0"></rich-text>
		<!-- <image class="ss" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/bg1.jpg" mode="widthFix"></image> -->
		<!-- <image class="ss" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/bg1.jpg" mode="widthFix"></image> -->
	</view>
	<!-- <view class="h80"></view> -->
<!-- 	<view class="bottom" :style="{'padding-bottom': bottom_iphone?20 + 'rpx':''}">
		<view style="display: flex;justify-content: space-around;width: calc(100% - 180px);">
			<view class="sc" @click="changeSc()"><image v-if="!isSc" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/sc.png" mode=""></image><image v-else src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/sc_a.png" mode=""></image><view class="">收藏</view></view>
			<view class="sc"><button class="btn-special" :plain="true" @click="open"><image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/zf.png" mode=""></image></button><view class="">转发</view></view>
			<view class="sc" @click="pl()">
				<image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/plicon.png" mode=""></image>
				<view class="">评论</view><view v-if="plList.length>0" class="num">{{total}}</view></view>
		</view>
		<view class="btn" :class="data.timestatus.id==4?'over':''" @click="bmForm">{{data.timestatus.id==4?"已结束":data.signstatus==0?'我要报名':data.signstatus==1?'已报名':''}}</view>
	</view>
	<open ref="open" @showhaibao='showhaibao'></open> -->
	<!-- <pl-div ref="pl" :plList='plList' :total='total' @toSubmit = 'toSubmit' @getMore='getMore' @getMoreList='getMoreList' @toPl='toPl' @touchmove.stop.prevent="()=>{}"></pl-div> -->
	<!-- <pl-div ref="pl" :plList='plList' @toSubmit = 'toSubmit' @getMore='getMore' @toPl='toPl' @touchmove.stop.prevent="()=>{}"></pl-div> -->
	<!-- <pl-div ref="pl" :plList='plList' @toPl='toPl'></pl-div> -->
	<haibao ref="haibao"></haibao>
	<jtcXf></jtcXf> 
	<bmList @toP='toP' ref='rm' :list='numList'></bmList>
</view>
</template>

<script>
	import { localprojects,gz,ShareAdd,pl ,hbApi ,hy,GetUseInfo ,CreateQrcode} from '../../utils/api.js'
	import open from '@/components/open/open.vue'
	// import plDiv from '@/components/pl/pl.vue'
	import haibao from '@/components/haibao/haibao.vue'
	import jtcXf from '../../components/jtc-xf/jtc-xf.vue';
	import bmList from '../../components/bmList/bmList.vue';
	export default { 
		data() {
			return {
				bottom_iphone:uni.getStorageSync('bottom')||false,
				data:{id:'',image:'',chain_names:''},
				id:'',
				plList:[],
				numList:[],
				isSc:false,
				page:1,
				active:0,
				isNewRenderDone:true,
				typeList:['会议议程','宣传片'],
				total:0
			}
		},
		components:{
			haibao,
			// plDiv,
			open,
			jtcXf,
			bmList
		},
		onLoad(option){
			this.id = option.id
			this.getDetail(this.id)
			this.getNum(this.id)
			// gz.CheckAttend({identification:this.id,type:8}).then(res=>{
			// 	if(res.data.isAttend == 1){
			// 		this.isSc = true
			// 	}else{
			// 		this.isSc = false
			// 	}
			// })
		},
		onShareTimeline() {
			ShareAdd({identification:this.id,type:8,name:this.data.title})
			return {
				title: this.data.title+' | 投资钟祥',
			}
		},
		onShareAppMessage() {
			ShareAdd({identification:this.id,type:8,name:this.data.title})
			return {
				title: this.data.title+' | 投资钟祥',
			}
		},
		onReachBottom() {
			// 加锁，避免在加载更多时用户频繁下拉导致的重复触发而渲染异常
			if(!this.isNewRenderDone) return;   
			this.isNewRenderDone = false
			this.page+=1
			this.getPlList()
		},
		onShow(){
			
		},
		methods: {
			toMap(){
				uni.openLocation({
					latitude : parseFloat(this.data.lat),
					longitude: parseFloat(this.data.lng),
					name:this.data.city_name,
					address:this.data.address,
					success: function () {
							console.log('success');
					},
					fail : function (err) {
							console.log(err);
					},
				})
			},
			toP(index){
				uni.navigateTo({
					url:`/pages/dzMp/dzMp?user_id=${this.numList[index].user_id}`
				})
			},
			showL(){
				this.$refs.rm.show() 
			},
			open(){
				this.$refs.open.show()
			},
			pl(){
				this.$refs.pl.show()
			},
			getNum(id){
				hy.GetMeetingMembers({meeting_id:id}).then(res=>{
					this.numList = res.data.data
				})
			},
			getDetail(id){
				hy.GetMeetingDetail({id}).then(res=>{
					this.data = res.data
					console.log(this.data)
				})
			},
			showhaibao(){
				uni.showLoading({ mask:true,title:'海报制作中',mask:true})
				CreateQrcode({type:3,id:this.id}).then(res=>{
					uni.hideLoading()
					if(res.status==0){
						uni.showToast({
							title:'海报制作失败...'
						})
						return
					}
					this.$refs.haibao.show(res.data.qrcode)
				})
			},
			getPlList(){
				pl.getList({identification:this.id,type:8,page:this.page}).then(res=>{
					if(this.page == 1){
						this.plList = res.data.data
					}else{
						this.plList = this.plList.concat(res.data.data) 
					}
					this.total = res.data.total
					this.isNewRenderDone = true
				})
			},
			toPl(){
				uni.navigateTo({
					url:`/pages/pl/pl?data=` + JSON.stringify({identification:this.data.id,type:8,name:this.data.title})
				})
			},
			getMoreList(){
				let page = 1
				if(this.plList.length>0){
					page = Math.floor((this.plList.length/15)+1)
				}
				this.page = page
				this.getPlList()
			},
			getMore(item){
				let page = 1
				this.loading_c = true
				if(item.children&&item.children.length>0){
					page = Math.floor((item.children.length/15)+1)
				}
				pl.getList({identification:this.id,type:8,page,pid:item.id}).then(res=>{
					if(page == 1){
						item.children = res.data.data
					}else{
						item.children = item.children.concat(res.data.data) 
					}
					let index = this.plList.findIndex(item1=>(item.pid!=0?item.pid:item.id) == item1.id)
					this.plList[index] = item
					this.loading_c = false
				})
			},
			toSubmit(item){
				let data = {
					desc:item.desc1,
					identification:this.data.id,
					type:8,
					name:this.data.title,
				}
				if(item.id){
					data.pid = item.pid!=0?item.pid:item.id
					data.o_user_id = item.user_id
				}
				pl.CommentAdd(data).then(res=>{
					if(res.status==1){
						uni.showToast({
							title:'评论成功'
						})
						let info = JSON.parse(uni.getStorageSync('userinfo'))
						if(item.id){
							let data = {
								avatar:info.avatar,
								nickname:info.nickname,
								o_nickname:item.nickname,
								desc:item.desc1,
								createtime:'刚刚'
							}
							let index = this.plList.findIndex(item1=>(item.pid!=0?item.pid:item.id) == item1.id)
							this.plList[index].comment_num+=1
							if(this.plList[index].children&&this.plList[index].children.length>0){
								this.plList[index].children.push(data)
							}else{
								this.plList[index].children=[data]
							}
							this.plList.push('')
							this.plList.pop()
						}else{
							let data = {
								avatar:info.avatar,
								nickname:info.nickname,
								desc:item.desc1,
								createtime:'刚刚'
							}
							this.plList.unshift(data)
						}
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				}).catch(err=>{
					uni.showToast({
						title:err,
						icon:'none'
					})
				})
			},
			
			toZb(){
				let data = JSON.stringify(this.data)
				data = JSON.parse(data)
				data.content=''
				data = JSON.stringify(data)
				uni.navigateTo({
					url:`/subPage/pages/zhibo/zhibo?data=${data}`
				})
			},
			bmForm(){
				let that = this
				if(this.data.timestatus.id==4){
					uni.showToast({
						icon:'none',
						title:'会议已结束'
					})
					return
				}
				if(that.data.status.id==1){
					if(that.data.signstatus==0){
						uni.showModal({
							title:'提示',
							content:'确认报名？',
							success: function (res) {
								if (res.confirm) {
								GetUseInfo().then(res=>{
									if(res.data.mobile){
										let data = {
											username:res.data.nickname,
											mobile:res.data.mobile,
											career:res.data.career,
											com_type:res.data.com_type,
											company_name:res.data.company_name,
											meeting_id:that.data.id
										}
										hy.MeetingSign(data).then(res1=>{
											if(res1.status==1){
												uni.showToast({
													title:'报名成功'
												})
												that.data.signstatus=1
											}else{
												uni.showToast({
													icon:'none',
													title:res1.msg
												})
											}
										})
									}else{
										uni.showModal({
											title:'提示',
											content:'需完善电子名片后方能报名',
											success: function (res) {
												if (res.confirm) {
													uni.navigateTo({
														url:'/pages/bmForm/bmForm'
													})
												}
											
											}
										})
									}
								})
								}
							}
						})
					}else if(that.data.signstatus==1){
						uni.showToast({
							icon:'none',
							title:'你已经报名'
						})
					}
				}else if(that.data.status.id==0){
					uni.showToast({
						icon:'none',
						title:'报名未开始'
					})
				}else{
					uni.showToast({
						icon:'none',
						title:'报名已结束'
					})
				}
			},
			changeSc(){
				if(! JSON.parse(uni.getStorageSync('userinfo')).nickname ){
					uni.showModal({
						title:'提示',
						content:'需完成登录授权后方能收藏',
						success: (res) => {
							if (res.confirm) {
							uni.switchTab({
								url:'/pages/my/my'
							})
							}
						},
					})
					return
				}
				gz.AttendAddOrCancel({identification:this.data.id,type:8,name:this.data.title}).then(res=>{
					if(res.status==1){
						this.isSc=!this.isSc
					}
				})
			},
		}
	}
</script>

<style  lang="scss" scoped>
	.video{
		width: 100%;
		margin: 10px 0;
	}
	.flex_t{
		width: calc(100% - 16px);
		padding: 8px 0;
		display: flex;
		background-color: #fff;
		.item_t{
			height: 32px;
			line-height: 32px;
			padding: 0 4px;
			margin: 0 4px;
			font-size: 14px;
			color: #666;
		}
		.active{
			color: #0091FF;
			font-weight: 800;
			font-size: 16px;
			position: relative;
		}
		.active::after{
			content: ' ';
			position: absolute;
			width: 20px;
			height: 2px;
			bottom: 0;
			left: calc(50% - 10px);
			background-color: #0091FF;;
		}
	}
	
	.chain_n{
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 8px;
		view{
			padding: 2px 8px;
			background-color: #0091FF;
			color: #fff;
			border-radius: 4px;
			font-size: 12px;
			margin-right: 5px;
			margin-bottom: 5px;
		}
	}
	.h80{
		height: 80px;
	}
	.page{
		position: relative;
	}
	.status{
		position: absolute;
		top: 10px;
		left: 10px;
		width: 60px;
		background: rgba($color: #0091FF, $alpha: 1);
		height: 22px;
		line-height: 22px;
		text-align: center;
		font-size: 14px;
		border-radius: 4px;
		color: #fff;
	}
	.isOld{
		background: rgba($color: #ccc, $alpha: 1);
	}
	.zb{
		position: absolute;
		top: 0;
		right: 0;
		width: 100px;
		background: rgba($color: #000000, $alpha: .5);
		height: 26px;
		display: flex;
		align-items: center;
		padding: 0 8px;
		font-size: 14px;
		color: #fff;
		image{
			width: 18px;
			margin: 0 8px;
		}
		.dian{
			height: 10px;
			width: 10px;
			border-radius: 5px;
		}
		.red{
			background: red;
		}
	}
	.ss{
		width: 100%;
		margin-bottom: 5px;
	}
.m10{
	margin: 10px 0;
}
.bm{
	padding: 10px 10px;
}
.title_shu{
	position: relative;
	padding-left: 8px;
	font-size: 14px;
	color: #333;
	height: 16px;
	line-height: 16px;
	&::after{
		position: absolute;
		content: ' ';
		height: 14px;
		width: 3px;
		border-radius: 1px;
		background: #0091FF;
		left: 0;
		top: 1px;
	}
}
.bm_flex{
	display: flex;
	overflow-y: auto;
	padding: 14px 0 ;
	border-bottom: 1px solid #e6e6e6;
	position: relative;
	.img{
		width: 42px;
		height: 42px;
		border-radius: 21px;
		margin-right: 12px;
		// background: ;
		position: relative;
		image{
			width: 100%;
			height: 100%;
			border-radius: 21px;
		}
	}
	.img_b{
		background-color: rgba($color: #0091FF, $alpha: .2);
	}
	
}
	.qd::after{
		position: absolute;
		content:' ';
		background: url(https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/qiandao.png) no-repeat;
		width: 22px;
		height: 22px;
		background-size: 100% 100%;
		top: -4px;
		right: -4px;
	}
.swiper{
	width: 100%;
	height: 200px;
	position: relative;
	.swiper_item{
		width: 100%;
		height:100%;
		image{
			width: 100%;
			height:100%;
		}
	}
}
.title_h{
	font-size: 16px;
	font-weight: 800;
	color: #333;
	padding: 10px 14px;
}
.heng{
	width: 100%;
	height: 8px;
	background-color: #dfdfdf;
}
.main{
	font-size: 13px;
	color: #666;
	padding: 10px 14px;
	.red{
		font-size: 16px;
		color: #0091FF;
	}
	.m_item{
		display: flex;
		align-items: center;
		margin: 0px 0 10px;
	}
	image{
		width: 14px;
		height: 14px;
		margin-right: 5px;
	}
}
.bottom{
	position: fixed;
	justify-content: space-around;
	align-items: center;
	bottom: 0;
	// width: calc(100% - 20px);
	width: 100%;
	// padding: 0 10px;
	height: 54px;
	background: #FFFFFF;
	display: flex;
	z-index: 100;
	box-shadow: 0px -2px 2px #e7e7e7;
	.btn{
		font-size: 18px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		height: 54px;
		line-height: 54px;
		background: linear-gradient(90deg, #0091FF88 0%, #0091FF 100%);
		// border-radius: 23px;
		width: 180px;
	}
	.sc{
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		text-align: center;	
		position: relative;
		// width: ;
		image{
			width: 24px;
			height: 24px;
		}
		.num{
			position: absolute;
			font-size: 12px;
			background-color: red;
			height: 14px;
			line-height: 14px;
			border-radius: 7px;
			padding: 0 4px;
			color: #fff;
			right: -5px;
			top: -5px;
		}
	}
}
.pl_item{
	display: flex;
	margin: 10px 16px;
	width: calc(100% - 32px);
	.tx{
		width: 24px;
		height: 24px;
		margin-right: 10px;
	}
	.r{
		width: calc(100% - 34px);
		padding-bottom:10px;
		border-bottom: 1px solid #E9EBEE;
		.top{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10px;
			.name{
				font-size: 14px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #507DAF;
			}
			.time{
				font-size: 14px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}
		.content{
			padding-top:10px;
			font-size: 16px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
	}
}
.over{
	background: #cccccc !important; 
}
</style>
